<template>
  <KView class="sys-select-picker-dropdown">
    <KView class="sys-select-picker-dropdown-title-div">
      <KView class="sys-select-picker-dropdown-btn" style="color:#7f7f7f" @click="cancel">{{clearable?'清空':'取消'}}</KView>
      <KView class="sys-select-picker-dropdown-placeholder">{{placeholder}}</KView>
      <KView class="sys-select-picker-dropdown-btn" style="text-align:right;color:#22c871" @click="ensure">确定</KView>
    </KView>
    <KView class="sys-select-picker-dropdown-line"></KView>

    <KView class="sys-select-picker-dropdown-content">
      <KPickerView v-model="pickerIndex" indicator-class="pickerClass" class="sys-select-picker-dropdown-view">
        <KPickerViewColumn>
          <KView class="sys-select-picker-dropdown-item" v-for="option in options" :key="option.value">{{option.label}}</KView>
        </KPickerViewColumn>
      </KPickerView>
    </KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  export default {
    props: {
      value: {
        type: Number,
        required: true
      },
      placeholder: {
        type: String,
        default: ''
      },
      options: {
        type: Array,
        default: () => []
      },
      clearable: {
        type: Boolean,
        default: false
      }
    },

    data() {
      let value = this.value;
      if (SystemUtil.isEmpty(value)) {
        value = 0;
      }
      return {
        pickerIndex: [value]
      };
    },

    methods: {
      resetIndex(){
        let value = this.value;
        if (value === null) {
          value = 0;
        }
        this.pickerIndex = [value];
      },

      cancel() {
        if (this.clearable) {
          this.toChange(null);
          return;
        }
        this.$emit('close');
      },

      ensure() {
        let pickerIndex = this.pickerIndex;
        let index = pickerIndex[0];
        this.toChange(index);
      },

      toChange(index) {
        if (index === this.value) {
          return;
        }

        this.$emit('input', index);
        this.$emit('change', index);
      },

      pickerClose() {
        this.$emit('close');
      }
    }
  };

</script>

<style lang="scss">
  .sys-select-picker-dropdown {
    height: calc(100% - #{formatPx(20)});
    padding: formatPx(20) formatPx(26) 0;
    background: #ffffff;

    .sys-select-picker-dropdown-title-div {
      height: formatPx(80);
      line-height: formatPx(80);
      display: flex;
      font-size: formatPx(30);
      margin-bottom: formatPx(10);

      .sys-select-picker-dropdown-btn {
        width: formatPx(120);
      }

      .sys-select-picker-dropdown-placeholder {
        flex: 1;
        height: 100%;
        text-align: center;
      }
    }

    .sys-select-picker-dropdown-line {
      height: 1px;
      background: #DADADA;
    }

    .sys-select-picker-dropdown-content {
      height: calc(100% - #{formatPx(96)});
      overflow: auto;

      .sys-select-picker-dropdown-view {
        height: 100%;

        .sys-select-picker-dropdown-item {
          text-align: center;
          font-size: formatPx(26);
          height: formatPx(50) !important;
          line-height: formatPx(50);
        }

        .pickerClass {
          height: formatPx(50) !important;
        }
      }
    }
  }

</style>
